<template>
  <div class="box-main">
    <div v-if="!showPatientInfo" style="width: 100%; height: 100%">
      <div class="topHeaderCard">
        <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)" ghost>
          返回
        </a-button>
      </div>
      <div class="bax-main-content">
        <div class="page-content">
          <a-card style="width: 100%; height: 100%">
            <div class="header">
              <Condition
                :condition="condition"
                :btns="['search', 'reset']"
                @search="searchHandle"
                @reset="reset"
              />
              <span> 共筛选出 {{ pagination.total }} 条数据 </span>
            </div>
            <div class="main">
              <a-table
                class="table"
                size="small"
                :loading="loading"
                :dataSource="List"
                :columns="columns"
                :pagination="pagination"
                @change="paginationChange"
                :sticky="{ offsetHeader: 0 }"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.dataIndex == 'createTime'">
                    <span>{{
                      record.createTime
                        ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
                        : ''
                    }}</span>
                  </template>
                  <template v-else-if="column.dataIndex == 'peStaffName'">
                    <span @click="toDetail(record)" style="color: #1677ff; cursor: pointer">
                      {{ record.peStaffName }}
                      {{ record.gender }}
                      {{ record.age || '' }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex == 'operatorName'">
                    <span v-if="record.operatorName">{{ record.operatorName }}</span>
                    <span v-else>/</span>
                  </template>
                  <template v-else-if="column.dataIndex == 'peStaffTypeName'">
                    <a-tag
                      color="#E8FFEA"
                      style="color: #00b42a; border-color: #00b42a"
                      v-for="item in record.peStaffTypeName.split(',')"
                      :key="item"
                    >
                      {{ item }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.dataIndex == 'peTaskStatus'">
                    <span v-if="record.peTaskStatus == 'TODO'">待处理</span>
                    <span v-else>已处理</span>
                  </template>
                  <template v-else-if="column.dataIndex === 'operateTime'">
                    {{
                      record.operateTime
                        ? dayjs(record.operateTime).format('YYYY-MM-DD HH:mm:ss')
                        : '/'
                    }}
                  </template>
                  <template v-else-if="column.dataIndex === 'replyContent'">
                    <template v-if="record.replyContent">
                      <a-popover
                        title="企业回复"
                        trigger="click"
                        placement="rightTop"
                        :overlayStyle="{ width: '500px' }"
                        :get-popup-container="(triggerNode) => triggerNode"
                      >
                        <template #content>
                          <div style="max-height: 300px; padding: 0 10px; overflow: hidden auto">
                            <pre
                              style="
                                margin-bottom: 0;
                                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                                  'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                                  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
                                  'Noto Color Emoji';
                                font-size: 14px;
                                color: rgba(0, 0, 0, 88%);
                                word-wrap: break-word;
                                white-space: pre-wrap;
                              "
                              >{{ record.replyContent }}</pre
                            >
                          </div>
                        </template>
                        <div
                          style="
                            display: -webkit-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 3;
                            cursor: pointer;
                            -webkit-box-orient: vertical;
                          "
                        >
                          {{ record.replyContent }}
                        </div>
                      </a-popover>
                      <!-- <pre
                        style="
                          white-space: pre-wrap;
                          margin-bottom: 0;
                          font-size: 14px;
                          color: rgba(0, 0, 0, 0.88);
                          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                            'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
                            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
                        "
                        >{{ record.replyContent }}</pre
                      > -->
                    </template>
                    <template v-else> / </template>
                  </template>
                </template>
              </a-table>
            </div>
          </a-card>
        </div>
      </div>
    </div>
    <PatientInfo ref="patientInfoRef" v-if="showPatientInfo" @close="gopatientBack" />
  </div>
</template>
<script lang="ts" setup>
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import Condition from '@/components/ConditionSearch/index.vue'
import { ref, onMounted, reactive, h } from 'vue'
import dayjs from 'dayjs'
import { getGroupInspectionTaskList } from './groupInspection.api'
import PatientInfo from '@/views/examinatePatients/patientInfo.vue'
import { getPatientManage } from '@/api/patientMana/index'

const peOrgId = ref<string>('')
const showPatientInfo = ref<boolean>(false)
const emit = defineEmits(['close'])
const loading = ref<boolean>(false)
const List = ref<any[]>([])
const condition = ref([
  {
    title: '',
    dataIndex: 'peStaffName',
    type: 'input',
    value: '',
    placeholder: '请输入姓名'
  },
  {
    title: '',
    dataIndex: 'peStaffType',
    type: 'select',
    data: [
      // {
      //   label: '已就诊',
      //   value: '已就诊'
      // },
      // {
      //   label: '住院',
      //   value: '住院'
      // },
      // {
      //   label: '未就诊',
      //   value: '未就诊'
      // },
      // {
      //   label: '手术',
      //   value: '手术'
      // },
      // {
      //   label: '重大疾病',
      //   value: '重大疾病'
      // },
      // {
      //   label: '肿瘤',
      //   value: '肿瘤'
      // },
      // {
      //   label: '失访',
      //   value: '失访'
      // },
      // {
      //   label: '不配合',
      //   value: '不配合'
      // }
    ],
    value: undefined,
    placeholder: '请选择任务标签'
  },
  {
    title: '',
    dataIndex: 'peTaskStatus',
    type: 'select',
    data: [
      {
        label: '待处理',
        value: 'TODO'
      },
      {
        label: '已处理',
        value: 'DONE'
      }
    ],
    value: undefined,
    placeholder: '请选择任务状态'
  },
  {
    title: '',
    dataIndex: 'operatorName',
    type: 'input',
    value: '',
    placeholder: '请输入负责人'
  },
  {
    title: '任务时间',
    dataIndex: 'taskTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '企业处理时间',
    dataIndex: 'processTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  }
])
const columns = ref<any[]>([
  {
    title: '任务时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left'
  },
  {
    title: '催办',
    dataIndex: 'peOrgName',
    key: 'peOrgName',
    align: 'left'
  },
  {
    title: '负责人',
    dataIndex: 'operatorName',
    key: 'operatorName',
    align: 'left'
  },
  {
    title: '员工',
    dataIndex: 'peStaffName',
    key: 'peStaffName',
    align: 'left'
  },
  {
    title: '任务内容',
    dataIndex: 'peTaskContent',
    key: 'peTaskContent',
    align: 'left'
  },
  {
    title: '任务标签',
    dataIndex: 'peStaffTypeName',
    key: 'peStaffTypeName',
    align: 'left'
  },
  {
    title: '任务状态',
    dataIndex: 'peTaskStatus',
    key: 'peTaskStatus',
    align: 'left'
  },
  {
    title: '企业处理时间',
    dataIndex: 'operateTime',
    key: 'operateTime',
    align: 'left'
  },
  {
    title: '企业回复',
    dataIndex: 'replyContent',
    key: 'replyContent',
    align: 'left'
  }
])
const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}

const init = async (orgId: string) => {
  peOrgId.value = orgId
  loading.value = true

  await getPatientManage().then((res) => {
    condition.value[1].data = res.data.map((vo: any) => {
      return {
        label: vo.labelName,
        value: vo.labelCode,
        id: vo.id
      }
    })
  })

  getDataList()
}
const getDataList = () => {
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      if (v.dataIndex == 'taskTime') {
        return Object.assign(c, {
          taskStart: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
          taskEnd: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
        })
      } else if (v.dataIndex == 'processTime') {
        return Object.assign(c, {
          processStart: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
          processEnd: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
        })
      } else {
        return Object.assign(c, { [v.dataIndex]: v.value })
      }
    } else {
      return c
    }
  }, {})
  getGroupInspectionTaskList({
    ...obj,
    page: pagination.value.current,
    limit: pagination.value.pageSize,
    peOrgId: peOrgId.value
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const searchHandle = () => {
  pagination.value.current = 1
  loading.value = true
  getDataList()
}
const reset = () => {
  pagination.value.current = 1
  pagination.value.pageSize = 10
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}

const resetBack = () => {
  emit('close')
}

const patientInfoRef = ref()
const toDetail = (data: any) => {
  showPatientInfo.value = true
  nextTick(() => {
    patientInfoRef.value.initRouterInfo(data)
  })
}

const gopatientBack = () => {
  showPatientInfo.value = false
  loading.value = true
  getDataList()
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.box-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 24px;
    background-color: #fff;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .bax-main-content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 16px;
    overflow: hidden auto;

    .page-content {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
}
</style>
